<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="学生认证" />

		<view class="container">
			<view class="tips color-E85531 font24" style="background:#f9f9f9">
				<view>
					认证信息只提供3次免费修改机会。
					当前剩余修改次数：<text class="fwb font30">{{num}}</text> 次
				</view>
			</view>
			<view class="edit">
				<view class="fboxRow Ycenter cell" v-for="(item, index) in config" :key="index" @tap="onToast(item)">
					<view class="flex1">{{item.title}}</view>
					<view class="right fboxRow Ycenter font26">{{student[item.key] ? student[item.key] : '请填写'}}  <u-icon name="arrow-right" size="12" color="#969799"></u-icon></view>
				</view>
				
				<view class="tips font22" style="background:#f9f9f9;color:#999">
					<view class="fwb" style="color:#36363A">注意事项：</view>
					<view>1.认证信息中“真实姓名”项，请填写您所在学校考试用的姓名；</view>
					<view>2.认证信息填写完成后，请您认真核对所填写信息是否正确，确认无误后并提交保存；</view>
					<view>3.认证信息只提供3次免费修改机会，之后将不再提供修改功能；</view>
					<view>4.请大家认真、正确填写认证信息，否则将影响后续成绩查询。</view>
				</view>
				<view class="apply fboxRow Ycenter Xcenter">
					<text class="color-00C15D font46 fwb" @tap="goto">修改认证信息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		studentInfo, bksFunctionInfo
	} from '@/api/bks.index.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				list: [],
				step: 1,
				isEdit: true,
				isInfo: false,
				num: 3,
				state: 0,
				config:[
					{title: '所在学校', key: 'unitName', step: 1},
					{title: '年级名称', key: 'gradeName', step: 2},
					{title: '身份', key: 'identity', step: 2},
					{title: '真实姓名', key: 'studentName', step: 2},
				],
				student: {
					unitId: '',
					unitName: '',
					studentName: '',
					gradeName: "",
					identity: "",
				}
			}
		},
		onShow(option) {
			this.getStudentInfo()
		},
		methods: {
			// 获取学生信息
			getStudentInfo() {
				studentInfo().then(res => {
					if (res.data) {
						this.student = res.data
						this.num = res.data.num
						uni.setStorageSync('bw_bks_student', res.data)
					}else{
						uni.setStorageSync('bw_bks_student', this.student)
					}
				})
			},
			// 展示提示
			onToast(e) {
				if (this.num > 0 || (!this.student.studentName && !this.student.unitId)) {
					const { step } = e
					this.step = step
					this.isEdit = true
					this.state = step
					if (this.student.studentName) {
						if (step == 1) {
							this.$pageTo('/bks/mine/certification/school')
						} else {
							this.$pageTo('/bks/mine/certification/name?step=1')
						}
					} else {
						this.$pageTo('/bks/mine/certification/school')
					}
				} else {
					wx.showToast({
						title: '您当前的修改次数已使用完',
						icon: 'none'
					})
				}
			},
			// 跳转
			goto() {
				if (this.num > 0 || (!this.student.studentName && !this.student.unitId)) {
					this.$pageTo('/bks/mine/certification/school')
				} else {
					wx.showToast({
						title: '您当前的修改次数已使用完',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/mine/certification/index.wxss */
	.container {
		position: relative;
		padding-bottom: 30rpx;
	}
	.cell{height: 88rpx;}
	.cell .right{color: #969799;}

	.container .tips {
		padding: 30rpx;
		background: rgba(255, 230, 170, .3);
		border-radius: 4rpx;
		line-height: 36rpx;
	}

	.container .edit {
		padding: 30rpx;
	}

	.container .search {
		width: 630rpx;
		height: 80rpx;
		background: #F5F6F6;
		border-radius: 34rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.container .name {
		width: 630rpx;
		height: 80rpx;
		border-bottom: 1px solid #F5F6F6;
		text-align: center;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}


	.container .result {
		height: 500rpx
	}

	.bottom {
		height: 120rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx 0;
		z-index: 2;
	}

	.fixed-bottom .button {
		height: 80rpx;
	}

	.container .result .list .item {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #EBEBF0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.container .result .list .item:last-child {
		margin-bottom: 0;
	}

	.container .result .list .item.check {
		background: #F5FAF7;
		border: 1px solid #00C15D;
		color: #00C15D;
	}

	.container .van-cell__title,
	.container .van-field__label {
		font-weight: bold;
		font-size: 28rpx;
		color: #36363A;
	}

	.container .van-cell__value,
	.container .van-cell__right-icon-wrap {
		font-size: 22rpx;
	}

	.container .van-cell {
		height: 98rpx;
		display: flex;
		align-items: center;
		padding: 0;
		word-break: break-all;
		word-wrap: break-word;
	}

	.container .van-cell:after {
		border: 0;
	}

	.container .apply {
		position: fixed;
		left: 0;
		bottom: 90rpx;
		width: 100%;
		text-align: center;
	}
</style>